<template>
  <div class="classify">
    <van-nav-bar
      title="我的栏目"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="$router.push({path:'/'})"
    >
    </van-nav-bar>
    <!-- 已经关注的栏目 -->
    <div class="group follow">
      <h3 class="title">已关注栏目</h3>
      <p class="desc">点击删除一下频道</p>
      <div class="list">
        <span 
          class="item"
          v-for="item in followList"
          :key="item.id"
          @click="removeFn(item)"
        >{{item.name}}</span>
      
      </div>
    </div>
    <div class="group unfollow">
      <h3 class="title">未关注栏目</h3>
      <p class="desc">点击删除一下频道</p>
      <div class="list">
        <span 
          class="item"
          v-for="item in unfollow"
          :key="item.id"
          @click="addFn(item)"
        >{{item.name}}</span>
        
      </div>
    </div>
  </div>
</template>

<script>
  import {getCategoryAPI} from '../apis/category'
  import {getToken,setCate,setUnCate,getCate, getunCate,} from '../utils/localData'
export default {
  data () {
    return {
      // 已关注
      followList:getCate(),
      // 未关注的栏目
      unfollow: getunCate(),
    }
  },
  async created() {
    // 如果本地存储两个数组都为空，表示从未请求数据
    if(this.followList.length === 0 && this.unfollow.length === 0) {
      const res = await getCategoryAPI()
      // 如果是已登陆，需要删掉前两项(关注和头条)
      if(getToken()) {
        // 可以用于删除数组的数据，改变原数组
        // splice 返回的值是 被删除的元素
        res.data.data.splice(0,2);
      } else{
        // 如果为登陆，需要删除掉前一项（头条）
        res.data.data.splice(0,1)
      }
      // 把操作后的数组保存
      this.followList =res.data.data
    }
  },
  methods:{
    removeFn(theItem) {
      // console.log(theItem);
      this.followList = this.followList.filter((item) => item.id !== theItem.id)
      this.unfollow.unshift(theItem)
    },
    // 点击添加栏目
    addFn(theItem) {
      this.unfollow = this.unfollow.filter((item) => item.id !== theItem.id);
      this.followList.unshift(theItem)
    }
  },
  watch:{
    followList() {
      setCate(this.followList);
      setUnCate(this.unfollow) 
    }
  }
}
</script>

<style lang="less" scoped>
  .group{
    padding: 10px;
    .title{
      font-size: 15px;
      margin: 10px 0;
    }
    .desc{
      font-size: 12px;
      color: #999;
      margin: 5px 0;
    }
    .list{
      display: flex;
      flex-wrap: wrap;
      .item{
        height: 35px;
        width: 23%;
        margin: 1%;
        border: 1px solid #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        position: relative;
        &::after{
          position: absolute;
          right: 5px;
          top: 0px;
        }
      }
    }
  }
  .unfollow .list .item::after{
      content: "+";

  }
  .follow .list .item::after{
      content: "-";

  }
</style>